	* {
	  margin: 0;
	  padding: 0;
	}

	html,
	body {
	  height: 100%;
	  width: 100%;
	  font-family: '楷体';
	}

	dl {
	  height: 200px;
	  width: 150px;
	  margin: 100px 0px 0px 50px;
	  float: left;
	  border: 1px solid #DCDFE6;
	  cursor: pointer;
	  transition: all 1s;
	  border-radius: 6px;
	}

	dl:hover {
	  border: 1px solid #409EFF;
	}

	dl dt {
	  width: 150px;
	  height: 130px;
	  border-bottom: 1px solid #DCDFE6;
	  text-align: center;
	}

	dl dt img {
	  /* 有参照之后，设置vertical-align: middle;属性，使其垂直居中 */
	  vertical-align: middle;
	}

	dl dt span {
	  /* 标签设定一个参照物 */
	  width: 0;
	  height: 100%;
	  display: inline-block;
	  vertical-align: middle;
	}

	dl dd {
	  text-align: center;
	  height: 30px;
	  line-height: 30px;
	  color: #909399;
	}

	dl dd:nth-child(3) {
	  color: #F56C6C;
	}